<%--
  Created by IntelliJ IDEA.
  User: dxd
  Date: 2017/9/18
  Time: 9:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>数据分析处理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>
    <link rel="stylesheet" type="text/css" href="mintor/compensatormanage/js/webuploader.css"/>

    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jquery/underscore-min.js"></script>
    <script type="text/javascript" src="mintor/compensatormanage/js/webuploader.js"></script>

    <style type="text/css">
        .btn-success,
        .btn-success:hover {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success :active {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success:focus {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .header.green {
            border-bottom-color: #92c0ea;
        }

        .green {
            color: #92c0ea !important;
        }

        .widget-box {
            border-bottom: 0px;
        }

        .panel-body {
            padding: 0px;
        }

        input[readonly] {
            background: #ffffff !important;
            cursor: default;
        }

        tr td {
            border: 1px solid orangered;
            width: 60px;
            height: 30px;
        }
    </style>

    <script type="text/javascript">
        var socketPath = "<%=webSocketPath%>";
        var type = 5;								//5:未确定

    </script>

</head>
<body style="margin-top: 80px;background-color:white;">
<div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
    <div class="widget-header header-color-purple" style="border-top-left-radius:10px;border-top-right-radius:10px;">
        <h4 style="color:white;font-family: '微软雅黑'">数据处理</h4>
    </div>
    <div class="widget-body" style="border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
        <div class="widget-main">
            <div class="row">
                <br><br><br>
                <div class="row" style="align-content: center;margin-top:5px;margin-left: 15px">
                    <div class="row-left" style="width: 98%;height:50px;float:left;border: 1px solid gainsboro   ">

                        <p style="margin-top: 6px;" align="center">
                            <%--请选择文件:--%>
                            <%--<input id="bin_file_path" type="input" value="录入数据处理代码"--%>
                                   <%--style="margin-left:20px;width: 200px;border: 2px solid #1a67bd ;"--%>
                                   <%--onfocus="javascript:if(this.value=='录入数据处理代码')this.value='';">--%>
                            <button id="picker" style="display: none;"></button>
                            <button id="pickerbtn" class="btn btn-success center" style="margin-left: 30px ;margin-bottom:5px;border-width: 4px;font-size: 13px;
                                     padding: 4px 9px;line-height: 1;">请选择py文件
                            </button>
                            <button id="uploadbtn" class="btn btn-success center" style="margin-left: 30px ;margin-bottom:5px;border-width: 4px;font-size: 13px;
                                     padding: 4px 9px;line-height: 1;">提交py文件
                            </button>
                            <button id="caculatebtn" onclick="GetResult()" class="btn btn-success center" style="margin-left: 30px ;margin-bottom:5px;border-width: 4px;font-size: 13px;
                                     padding: 4px 9px;line-height: 1;">开始云计算
                            </button>
                        </p>
                    </div>
                </div>
                <br><br><br>
                <div class="row" style="border:1px solid rgba(26, 103, 189, 0.75);border-radius:2px;display:inline-block;align-content: center;margin-bottom:2%;margin-left:0%;width:56%;height:50%;margin-top:-2%;">
                    <div id="calculate0" style="font-size:20px;width:100%;height:90%;margin-top:5%;">
                        <p  id="calculate1"></p>
                        <p  id="calculate2"></p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        // 变色特效
        var backgroundElement = window.top.cfgetTopBackgroundElement();
        $(backgroundElement).css("background", "rgba(126,110,176,0.9)");
    });

    $('#pickerbtn').click(function () {
        $('#picker input[type="file"]').click();
    });

    var uploader = WebUploader.create({
        // swf文件路径
        swf: 'mintor/compensatormanage/js/Uploader.swf',
        // 文件接收服务端。
        server: 'dataAnalysis/uploadbin',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        resize: false,                            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        duplicate: true,                           //是否可重复选择同一文件
        fileNumLimit: 1,                          // 发送限制单文件
        fileSingleSizeLimit: 5 * 1024 * 1024,    // 500M
        fileVal: "file"                            //指明参数名称，后台也用这个参数接收文件
    });

    // 选择了文件后，在文件被添加进队列前
    uploader.on('beforeFileQueued', function (file) {             // 发送限制单文件
        var fnum = uploader.getFiles().length;                        // 如果有文件在队列中
        if (fnum > 0) uploader.reset();                                  // 清除队列
    });
    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        var name = file.name;
        var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
        if (fileName !== 'py') {
            alert("请选择py格式文件上传！");
            uploader.reset();
            return false;
        }
        $('#bin_file_path').val(file.name);
    });
    uploader.on('error', function (type) {             // 选择文件出错
        if (type == "F_EXCEED_SIZE") {
            alert("附件不能大于5M");
        }
    });

    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').fadeOut();
        uploader.reset();
        $('#bin_file_path').val("录入数据处理代码");
    });
    $('#uploadbtn').on('click', function () {
        uploader.upload();
    });
    uploader.on('uploadAccept', function (file, response) {
        if (response.success == false) {
            // 通过return false来告诉组件，此文件上传有错。
            alert('上传失败\r\n' + response.msg);
            return false;
        }
        else alert(response.msg);
    });

    var linedata = "";
    function GetResult(){
        linedata = "";
        $("#calculate1").text("");
        $("#calculate2").text("");
        $.ajax({
            type:"get",
            url:"dataAnalysis/result",
            success:function(result){
               /* alert(result);*/
                $("#calculate2").text(result);
            },error: function (){
//                alert("操作失败，请与管理人员联系!");
                console.log(obj);
            }
        });
        websocketSet();
    }

    function websocketSet() {
        var errors;
        var wsPath = "<%=webSocketPath%>";
        var webSocket = new WebSocket('ws://' + wsPath + '/websocket/'+ 'python');
        webSocket.onerror = function (event) {
            onError(event)
        };
        webSocket.onopen = function (event) {
            onOpen(event)
        };
        webSocket.onmessage = function (event) {
            onMessage(event)
        };

        function onMessage(event) {
            console.log(event.data);
            var tempValue = JSON.parse(event.data);
            linedata = tempValue.value;
            $("#calculate1").text(linedata);
//            document.getElementById("out1").innerHTML = event.data;
            //$("#out1").show();

        }
        function onOpen(event) {
            console.log("open")
        }
        function onError(event) {
            console.log(event.data)
        }
        function start() {
            webSocket.send('pythonClient');
            return false;
        }
        return true;
    }


</script>

</body>
</html>
